import type {IColumnsOption} from 'vc';
import {
  INDEX,
} from '@/utils/tableColumn';

export function useTable() {
  const columns = ref<IColumnsOption[]>([
    {...INDEX},
    {
      field: 'monitorItem',
      title: '监测项目',
      align: 'center',
      // sortable: true,
      width: 150,
      sortBy: 'monitorItem',
      slots: {
        default: ({row}) => {
          return <>
            <div class="date">
              <span class="text">{row.monitorItem}</span>
              {row.tagOverproof ? <span class="py-1px px-7px ml-10px"
                                        style={{color: '#ffffff', backgroundColor: '#ff7a80'}}>
                {row.tagOverproof ? '超标' : ''}
              </span> : ''}

            </div>
          </>;
        }
      }
    },
    {
      field: 'monitorStation',
      title: '监测点',
      align: 'center',
      // sortable: true,
      sortBy: 'monitorStation'
    },
    {
      field: 'monitorDate',
      title: '采样日期',
      align: 'center',
      // sortable: true,
      width: 120,
      sortBy: 'monitorDate',
      formatter: ({row}) => {
        return row.monitorDate ? row.monitorDate.split(" ")[0] : '-';
      }
    },
    {
      field: 'concentration',
      title: '浓度实测值',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'concentration',
      slots: {
        default: ({row}) => {
          const content = row.concentration;
          if (content) {
            return <span>
              {row.tagOverproof ? <span style={{color: '#ff7a80'}} v-html={content}></span> :
                <span v-html={content}></span>}
            </span>
          } else {
            return '-';
          }
        }
      }
      // cellRender: {
      //   name: CellRenderMap.HighLight
      // }
    },
    {
      field: 'reducedConcentration',
      title: '浓度折算值',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'reducedConcentration',
      slots: {
        default: ({row}) => {
          return <>
            {row.tagOverproof ? <span style={{color: '#ff7a80'}}>
                {row.reducedConcentration || '-'}
              </span> : <span>{row.reducedConcentration || '-'}</span>}
          </>;
        }
      }
    },
    {
      field: 'concentrationUpperLimit',
      title: '指标限值',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'concentrationUpperLimit',
      formatter: ({row}) => {
        if (row.concentrationUpperLimit &&
          row.concentrationLowerLimit) {
          return row.concentrationUpperLimit + '-' + row.concentrationLowerLimit
        } else {
          return row.concentrationUpperLimit || row.concentrationLowerLimit
        }
      }
    },
    {
      field: 'unit',
      title: '单位',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'unit'
    },
    {
      field: 'noticeDate',
      title: '超标倍数',
      align: 'center',
      // sortable: true,
      width: 110,
      sortBy: 'noticeDate',
      slots: {
        default: ({row}) => {
          return <>
            {row.tagOverproof && row.overproofMultiples ? <span style={{color: '#ff7a80'}}>
                {row.overproofMultiples}
              </span> : <span>{row.overproofMultiples || '-'}</span>}
          </>;
        }
      }
    },
  ]);

  return {
    columns
  };
}
